{% extends "login/base.html" %}
{% block content %}
    <div class="auth-icon" aria-hidden="true">
        <svg viewBox="0 0 64 64" width="76" height="76" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M32 4L54 13V29C54 43 45 54 32 60C19 54 10 43 10 29V13L32 4Z"
                  stroke="currentColor" stroke-width="3.2" stroke-linejoin="round"/>
            <rect x="22" y="28" width="20" height="17" rx="3" stroke="currentColor" stroke-width="3"/>
            <path d="M26 28V22C26 18.7 28.7 16 32 16C35.3 16 38 18.7 38 22V28"
                  stroke="currentColor" stroke-width="3" stroke-linecap="round"/>
        </svg>
    </div>
    <h1 class="auth-title">Set Up Google Authenticator</h1>
    <p class="auth-subtitle">Scan this QR code with Google Authenticator, then enter the 6-digit code below.</p>

    <div class="text-center">
        <img src="data:image/png;base64,{{ qr_code }}" alt="Google Authenticator QR Code"
             class="img-fluid mb-3" style="max-width: 220px;">
    </div>

    <details class="mb-3">
        <summary>Can't scan the QR code?</summary>
        <p class="mt-2 mb-1 small">Enter this setup key manually:</p>
        <code class="user-select-all">{{ secret_key }}</code>
    </details>

    <form method="post">
        {% csrf_token %}
        <div class="mb-1">
            <label for="otp" class="form-label">6-digit verification code</label>
            <input type="text" class="form-control otp-input" id="otp" name="otp"
                   placeholder="Enter 6-digit code" inputmode="numeric"
                   autocomplete="one-time-code" pattern="[0-9]{6}" maxlength="6"
                   required autofocus>
        </div>
        <button type="submit" class="btn btn-verify w-100">Verify and Enable</button>
    </form>

    <p class="small text-muted text-center mt-3 mb-0">
        Authenticator will only be enabled after the code is verified.
    </p>

    {% if messages %}
        {% for message in messages %}
            <div class="alert alert-warning alert-dismissible fade show mt-4 mb-0" role="alert">
                {{ message }}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        {% endfor %}
    {% endif %}
{% endblock %}